<html>
    <head>
        <title>Test</title>
        <style>

canvas { border:1px solid; }

        </style>
    </head>
    <body>

<canvas id="canvas" width=300 height=200 />

    </body>
<script>

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
ctx.strokeStyle = 'black';

for (let i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
}
</script>

</html>